<template>
    <div>
        <div class="bottomF">
            <ul>
                <router-link to="/" tag="li">首页</router-link>
               <li>
                   <a-dropdown>
                       <a class="ant-dropdown-link" @click="e => e.preventDefault()"  style="color: #000000">
                           课程分类 <a-icon type="down"/>
                       </a>
                       <a-menu slot="overlay">
                           <a-menu-item v-for="(item,index) in list" :key="index">
                               <a href="javascript:;">{{item.subjectTitle}}</a>
                           </a-menu-item>

                       </a-menu>
                   </a-dropdown>
               </li>
                <li>专属课程</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {projectList} from "../api/api";

    export default {
        name: "ThreeTitle.vue",
        data(){
            return {
                list:[]
            }
        },
        created() {
            projectList(1).then(res=>{
                console.log(res)
                this.list=res.rows
                console.log(this.list)
            })
        }
    }
</script>

<style scoped lang="less">
.bottomF {
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    ul {
        height: 30px;
        line-height: 30px;
        li {
            list-style: none;
            float: left;
            margin-right: 30px;
            font-size: 16px;
            color: #000;
        }
        li:hover {
            color: #00cf8c;
            cursor: pointer;
        }
    }
}
</style>